import { useMemo } from 'react';
import { View, Text, Image } from '@tarojs/components';
import i18n from 'i18n-js';
import { GStyleSheet, DynamicColors } from '@/utils/DarkMode';
import ListItem from '@/components/ListItem';
import defaultIcon from '@/assets/images/default_icon.jpg';
import arrowRightIcon from '@/assets/images/arrow_right.png';
import CheckBox from '@/components/CheckBox';
import { getItemForPk } from '@/config/product';

const dstyles = GStyleSheet.create({
  content: {
    paddingLeft: 10,
  },
  checkBox: {
    height: 18,
    width: 18,
    borderColor: '#A4A4A4',
  },
  arrowIconStyle: {
    width: 16,
    height: 16,
    tintColor: '#888'
  },
  shareText: {
    marginTop: 6,
    fontSize: 12,
    color: DynamicColors.normalTextGaryColor,
  },
  deviceName: {
    color: DynamicColors.normalTextColor,
    fontSize: 16,
  },
});

interface IProps {
  device: IDevice;
  count?: number;
  showCount: boolean;
  isSelected?: boolean;
  showSel?: boolean;
  onPress?: ({ device }: { device: IDevice }) => void;
}

function DeviceItem({ device, isSelected, showSel, count, showCount = true, onPress }: IProps) {
  const styles = dstyles.useDynamicStyle();
  const deviceIcon = useMemo(() => {
    const config = getItemForPk(device.productKey);
    let icon = defaultIcon;
    if (config && config.icon) {
      icon = config.icon;
    }
    return icon;
  }, [device.productKey]);

  const subText = useMemo(() => {
    return showCount && (
      <Text style={styles.shareText}>
        {i18n.t('MY_SHARE_PERSON', { person: count ?? 0 })}
        {/* {currentHome && `(${currentHome.name})`} */}
      </Text>
    );
  }, [showCount, count, styles.shareText]);

  const extra = useMemo(() => {
    // console.log('extra', isSelected);
    return showSel ? (
      <CheckBox
        style={styles.checkBox}
        checked={!!isSelected}
      />
    ) : (
      <Image src={arrowRightIcon} style={styles.arrowIconStyle} />
    );
  }, [showSel, isSelected, styles]);

  return (
    <ListItem
      style={styles.content}
      extra={extra}
      icon={<Image src={deviceIcon} style={{ width: 30, height: 30 }} />}
      onPress={() => {
        onPress && onPress({ device });
      }}
    >
      <View style={{ display: 'flex', flexDirection: 'column' }}>
        <Text style={styles.deviceName}>{device.name}</Text>
        {subText}
      </View>
    </ListItem>
  );
}

export default DeviceItem;

